/*
    (1).歌曲搜索接口                                            
        请求地址:https://autumnfish.cn/search
        请求方法:get
        请求参数:keywords(查询的关键字)
        响应内容:歌曲搜索的结果
   (2).歌曲url获取
       请求地址:https://autumnfish.cn/song/url
       请求方法:get
       请求参数:id(歌曲的id)
       响应内容:歌曲的url地址
   (3).歌曲详情获取
       请求地址:https://autumnfish.cn/song/detail
       请求方法:get
       请求参数:ids(歌曲的id)
       响应内容:歌曲的详情,包含封面信息
    (4)歌曲评论
       请求地址:https://autumnfish.cn/comment/hot?type=0
       请求方法:get
       请求参数:id(歌曲的id,type固定为0)
       响应内容:歌曲的热门评论
    (6).mv地址获取
      请求地址:https://autumnfish.cn/mv/url
       请求方法:get
       请求参数:id(mvid,为0说明没有mv)
       响应内容:mv的地址
       */
/*    功能: 
   (1)歌曲获取                                          (2)歌曲播放
    1.按下回车(@keyup.enter)                             1.点击播放(@click)
    2.查询数据(axios 接口 v-model双向绑定)               2.歌曲地址获取(接口 歌曲id)
    3.渲染数据(v-for 数组)                               3.歌曲地址设置(v-bind 简写 :)
---------------------------------------------------------------------------------------------
    (3)歌曲详情获取                       (4)歌曲评论
    1.点击播放(增加逻辑)                    1.点击播放(增加逻辑) 
    2.歌曲封面获取(接口 歌曲id)             2.歌曲评论获取(接口 歌曲id)  
    3.歌曲封面设置(v-bind 简写 :)           3.歌曲评论渲染(v-for)
 ------------------------------------------------------------------------
    (5)播放和暂停                         (6)mv播放
    1.监听音乐播放(v-on play)                1.mv图标显示(v-if)
    2.监听音乐暂停(v-on pause)               2.mv地址获取(接口 mvid)
    3.操纵类名(:class)                       3.遮罩层(v-show v-on)
                                             4..mv地址设置(v-nind  :)
    */
var app = new Vue({
    el: '#player',
    data: {
        // name="",
        //(1)搜索关键字(属性)
        query: '',
        // (1.1)歌曲信息容器(属性)
        musicList: [],
        // (2)歌曲url 播放地址
        musicUrl: "",
        //(3) 歌曲封面
        muscCoVer: "",
        //(4) 歌曲评论
        hotComments: [],
        //(5) 用来判断是否绑定动画类名
        isActive: false,
        // (6)视频id
        mvid: "",
        // (6.1)显示或隐藏视频播放
        showVideo: false,
    },
    methods: {
        // (1)歌曲获取的方法
        searchMusic: function () {
            //1. get请求方法 第一个参数是请求地址 第二个参数是请求参数 把想要的歌曲名传到网络服务器
            axios.get("https://autumnfish.cn/search?keywords=" + this.query)
                .then(response => { //    (成功时调用的函数)response 接收返回的响应体
                    // 2.把歌曲信息(响应内容)赋值给musicList数组再由musicList数组传回html页面
                    console.log(response.data.result.songs);
                    this.musicList = response.data.result.songs;
                    this.mvid = response.data.result.songs[0].mvid;
                    console.log(response.data.result.songs[0].mvid);
                }, err => console.log(err))// (失败时调用的函数)
        },

        // (2)歌曲播放的方法 musicId接收歌曲id (由html页面点击传过来的参数)
        playMusic: function (musicId) {
            // console.log(musicId); 把想要的播放歌曲的id传到网络服务器
            axios.get("https://autumnfish.cn/song/url?id=" + musicId)
                .then(response => {//(成功时调用的函数)response 接收返回的响应体
                    // 把歌曲的地址赋值给 musicUrl属性 传回 html的播放器
                    this.musicUrl = response.data.data[0].url;
                }, err => console.log(err))// (失败时调用的函数)

            //(3)歌曲详情获取 (点击播放时顺便把歌曲详情获取)
            axios.get("https://autumnfish.cn/song/detail?ids=" + musicId)
                .then(response => {
                    // console.log(response);
                    // console.log(response.data.songs[0].al.picUrl);
                    this.muscCoVer = response.data.songs[0].al.picUrl;
                }, err => console.log(err));
            //(4)歌曲评论获取 
            axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId)
                .then(response => {
                    // console.log(response);
                    // console.log(response.data.hotComments);
                    this.hotComments = response.data.hotComments;
                }, err => console.log(err))
        },
        // (5).监听音乐播放(v-on play)
        play: function () {
            this.isActive = true;
        },
        //(5.1).监听音乐暂停(v-on pause)
        pause: function () {
            this.isActive = false;
        },
        //(6) mv地址获取
        mv: function (mvid) {
            axios.get("https://autumnfish.cn/mv/url?id=" + mvid)
                .then(response => {
                    // console.log(response);
                    // console.log(response.data.data.url);
                    this.mvid = response.data.data.url;
                    this.showVideo = true;
                    // 点击视频播放把音乐给关了
                    this.$refs.audio.pause();
                }, err => console.log(err))
        },
        //(6.1) 隐藏
        hide: function () {
            // 关闭时暂停 视频播放 $refs 绑定 html 带有 ref='video' 的标签
            this.$refs.video.pause();
            // 隐藏
            this.showVideo = false;
        }
    },
})
